<template>
    <div>
        <BaseForm ref="searchForm" type="search" :items="formItems" v-model:form="searchParams" @search="handleSearch">
            <template #suffix-button>
                <el-button type="primary" @click="handleEdit({})">
                    <el-icon>
                        <Plus />
                    </el-icon>
                    添加
                </el-button>
            </template>
        </BaseForm>
        <BaseTable ref="baseTable" :searchParams="searchParams" :defaultHeight="284" :serial="true"
            :getTableDataFn="powerService.getPowerPageList">
            <el-table-column prop="powerName" label="供电单位名称" />

            <el-table-column prop="updateTime" label="最后修改时间">
                <template #header>
                    <span>最后修改时间</span>
                    <SortTable :sortTablekey="sortTablekey" @click="sortTablekey = 1" :handleSearch="handleSearch">
                    </SortTable>
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="100">
                <template #default="scope">
                    <el-link :underline="false" link type="primary" size="small"
                        @click.prevent="handleEdit(scope.row)">编辑</el-link>
                    <el-link :underline="false" link type="danger" size="small"
                        @click.prevent="handleDel(scope.row)">删除</el-link>
                </template>
            </el-table-column>
        </BaseTable>
        <BaseDialog :title="(!ruleForm.powerId ? '新增' : '编辑') + '供电单位'" :handleCancel="handleCancel"
            :dialogVisible="dialogVisible">
            <BaseForm v-if="dialogVisible" type="rule" :handleOk="handleOk" :handleCancel="handleCancel" :items="formItems"
                v-model:form="ruleForm" :rules="rules" label-width="120px" :refresh="handleSearch">
            </BaseForm>
        </BaseDialog>
    </div>
</template>
  
<script setup lang="ts">
import { powerService } from '@/api/power'
import openMsgBox from '@/hooks/messageBox.js'
const formItems = ref([
    {
        name: '供电单位名称',
        key: 'powerName',
        type: 'input',
        maxLength:50
    },

])
const searchParams = ref({
    powerName: '',

})
const baseTable = ref(null)
const sortTablekey = ref(1)
const handleSearch = (data = { sort: undefined }, e = '') => {
    if (e != 'sort') sortTablekey.value = 0
    baseTable.value.handleSearch({
        ...searchParams.value,
        updateTimeOrder: data?.sort,
    })
}
const ruleForm = ref({
    powerId: '',
    powerName: '',
})
const rules = reactive({
    powerName: [{ required: true, message: '请输入', trigger: 'change' }],

})
const dialogVisible = ref(false)

const handleEdit = (row) => {

    ruleForm.value = { ...row }
    dialogVisible.value = true;
}
const handleCancel = () => {
    dialogVisible.value = false;
}

const handleDel = (row) => {
    openMsgBox(
        {},
        () => {
            return powerService.delPower({ data: [row.powerId] })
        },
        () => {
            handleSearch()
        }
    )
}
const handleOk = () => {
    if (ruleForm.value.powerId) {
        return powerService.updatePower({
            data: { ...ruleForm.value },
        })
    } else {
       return powerService.addPower({
            data: { ...ruleForm.value },
        })
    }
}

</script>
  
<style lang="scss" scoped></style>
  